<template>
    <div id="ui">
        <div class="banner">
            <img src="@/assets/images/ui/banner.png" alt="">
        </div>
        <Gallery class="what-is-ui" :isFull="false">
            <div slot="l">
                <img style="width: 100%;" src="@/assets/images/ui/what.png" alt="">                
            </div>
            <div class="what-is-ui-desc" slot="r">
                <h3 class="ui-title">什么是UI全栈式设计师</h3>
                <p>
                    全栈UI设计师是既会设计又要会代码的UI设计师，如今企业最重要的是能够在业务方面提供解决方案而不是只会执行的设计师，但多数设计师虽精于设计，却对交互、代码方面的只是都不甚了解，很难开展后续的工作。因而在源代码时代提出了全栈UI设计师的概念和要求，是希望UI设计能动的产品交互用研设计甚至更多，这样才能全方位的解决设计中的问题，对于初学者而言，掌握更全面的知识，才能应对日后在工作中遇到的各种挑战，在行业中具备更强的竞争力。迅科时代教育UI设计课程中囊括视觉、交互、代码；是是真正培养交互用研人才，真正打造全栈UI设计师的课程。
                </p>
            </div>                
        </Gallery>
        <div class="main">
            <Gallery class="ui-demand">
                <div slot="l" class="l">
                    <h3 class="ui-title">企业对UI设计师的需求</h3>
                    <div class="job">
                        <div class="job-postion">
                            <span class="job-postion__name">UI设计师</span>
                            <span class="job-postion__cop">新大陆</span>
                        </div>
                        <p class="job__require">4K-6K/福州/应届毕业生/专科以上/全职</p>
                        <ul class="job-skill">
                            <li class="job-skill__item">公司研发中心系统界面的设计；</li>
                            <li class="job-skill__item">负责软件系统界面配色、切图（指前端静态页面切图）</li>
                            <li class="job-skill__item">善于沟通，推进产品及交互设计的最终实现；</li>
                            <li class="job-skill__item">网页设计、数字媒体、艺术设计、平面设计等相关专业；</li>
                            <li class="job-skill__item">会配色，对色彩和审美有一定见解，具有良好的创新能力和独立解决问题的能力</li>
                        </ul>
                    </div>
                </div>
                <div slot="r" class="i">
                    <img src="@/assets/images/ui/xindalu.png" alt="">
                </div>
            </Gallery>

            <Gallery class="ui-demand">
                <div slot="r" class="r">
                    <h3 class="ui-title">企业对UI设计师的需求</h3>
                    <div class="job">
                        <div class="job-postion">
                            <span class="job-postion__name">UI设计师</span>
                            <span class="job-postion__cop">星网锐捷</span>
                        </div>
                        <p class="job__require">4K-6K/福州/应届毕业生/专科以上/全职</p>
                        <ul class="job-skill">                        
                            <li class="job-skill__item">负责项目产品、网站WEB及APP的UI设计、界面优化工作；</li>
                            <li class="job-skill__item">网页设计和运营维护中的U设计工作</li>
                            <li class="job-skill__item">熟悉HTML5\CSS3的新功能及标签；</li>
                            <li class="job-skill__item">有交互设计、手绘基础者优先；</li>
                            <li class="job-skill__item">扎实的美术功底，具备良好的审美能力与穿衣，美术、平面设计、工业设计及相关专业邮箱;</li>
                        </ul>
                    </div>
                </div>
                <img style="margin-left: -150px;" slot="l" src="@/assets/images/ui/ruijie.png" alt="">
            </Gallery>


            <Gallery>
                <div slot="l" class="l">
                    <h3 class="ui-title">以企业级实战项目驱动教学</h3>
                    <div class="use-project-tech__desc">
                        聘请网龙、百度、星网锐捷、新大陆等大型IT公司一线高级设计师，强强联手，企业级UI全栈式设计课程体系，从基础界面元素设计、高级UI界面设计、交互设计及用户体验，全方位专业培养。融合网龙、百度、星网锐捷等企业级项目，以项目为导向，锻炼学员设计能力，培养学员设计思维，让学员能想，会做、敢创新，打造拥有专业技能和创新思维的高端UI设计人才。
                    </div>
                </div>
                <img slot="r" src="@/assets/images/ui/t.png" alt="">
            </Gallery>

            <div class="to-guide-better-of-u">
                <div class="container">
                    <h3 class="to-guide-better-of-u__title">更全面的实训体系 指引成就更好的你</h3>
                    <div class="to-guide-better-of-u-wrap">
                        <div class="to-guide-better-of-u-wrap__item">
                            <img src="@/assets/images/ui/gaoji.png" alt="" srcset="">
                            <p class="to-guide-better-of-u-wrap__item_t">100%企业顶尖设计师授课</p>
                            <p class="to-guide-better-of-u-wrap__item_desc">网龙等大型IT一线高级UI设计内训师，亲临授课并分享项目经验，启发提升学员设计思维。</p>
                        </div>
                        <div class="to-guide-better-of-u-wrap__item" style="background:linear-gradient(0deg,rgba(125,80,254,1) 0%,rgba(74,80,254,1) 100%);">
                            <img src="@/assets/images/ui/xiangmu.png" alt="" srcset="">
                            <p class="to-guide-better-of-u-wrap__item_t">丰富的企业外包资源</p>
                            <p class="to-guide-better-of-u-wrap__item_desc">依托公司自身的开发平台及优秀项目资源，让学员参与到实际企业项目中从中获得提升机锻炼实现与企业需求无缝接轨。</p>
                        </div>
                        <div class="to-guide-better-of-u-wrap__item" style="background:linear-gradient(0deg,rgba(255,202,74,1) 0%,rgba(255,143,79,1) 100%);">
                            <img src="@/assets/images/ui/anlifenxi.png" alt="" srcset="">
                            <p class="to-guide-better-of-u-wrap__item_t">真实企业实战项目</p>
                            <p class="to-guide-better-of-u-wrap__item_desc">授课案例全为企业实战项目，从设计提案、交互设计、视觉界面到团队配合，完全仿真企业工作流程，快速提升企业UI设计技巧。</p>
                        </div>
                        <div class="to-guide-better-of-u-wrap__item" style="background:linear-gradient(0deg,rgba(83,203,190,1) 0%,rgba(50,205,115,1) 100%);">
                            <img src="@/assets/images/ui/shejipingshen.png" alt="" srcset="">
                            <p class="to-guide-better-of-u-wrap__item_t">我们只培养高端UI设计师</p>
                            <p class="to-guide-better-of-u-wrap__item_desc">UI设计师不仅仅只是会视觉界面设计，更好懂得如何进行用研分析及交互设计，对用户体验有更深入的认识及见解我们培养的是有设计思维的高阶UI设计师。</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="project-show">
                <div class="container">
                    <div class="ui-title">
                        学员作品展示
                    </div>

                    <div class="project-show-item">
                        <div class="project-show-item__name">平面设计</div>
                        <div class="project-show-item-wrap">
                            <img src="@/assets/images/ui/1.png" alt="">
                            <img src="@/assets/images/ui/2.png" alt="">
                            <img src="@/assets/images/ui/3.png" alt="">
                        </div>
                    </div>

                    <div class="project-show-item">
                        <div class="project-show-item__name">图标设计</div>
                        <div class="project-show-item-wrap">
                            <img src="@/assets/images/ui/4.png" alt="">                            
                            <img src="@/assets/images/ui/5.png" alt="">                            
                        </div>
                    </div>

                    <div class="project-show-item">
                        <div class="project-show-item__name">网页设计</div>
                        <div class="project-show-item-wrap">
                            <img src="@/assets/images/ui/6.png" alt="">                            
                            <img src="@/assets/images/ui/7.png" alt="">                            
                        </div>
                    </div>

                    <div class="project-show-item">
                        <div class="project-show-item__name">移动界面设计</div>
                        <div class="project-show-item-wrap">
                            <img src="@/assets/images/ui/8.png" alt="">                            
                            <img src="@/assets/images/ui/9.png" alt="">                            
                            <img src="@/assets/images/ui/10.png" alt="">                            
                            <img src="@/assets/images/ui/11.png" alt="">                            
                        </div>
                    </div>
                </div>
                
            </div>

            <div class="syllabus">
                <div class="container">
                    <h3 class="ui-title">
                        课程大纲
                    </h3>
                    <img src="@/assets/images/ui/c1.png" alt="">                            
                    <img src="@/assets/images/ui/c2.png" alt="">                            
                    <img src="@/assets/images/ui/c3.png" alt="">                            
                    <img src="@/assets/images/ui/c4.png" alt="">                            
                    <img src="@/assets/images/ui/c5.png" alt="">                            
                    <img src="@/assets/images/ui/c6.png" alt="">                            
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import Gallery from '@/components/Gallery'
export default {
    components: {
        Gallery
    }
}
</script>

<style lang="less" scoped>
.banner img,
.i > img{
    max-width: 100%;
    width: 100%;
}

.what-is-ui{
    background: #EAEDF4;
    .what-is-ui-desc{
        min-width: 580px;
        flex: 1;
        font-size: 20px;
        line-height: 42px;
        margin-left: 20px;
        color: #666666;
        padding-right: 30px;
    }
}
.ui-title{
    color: #F21166;
    font-size: 40px;
    word-break: keep-all;
    line-height: 1;
}

.job{
    line-height: 1;
    &-postion{
        margin-bottom: 20px;
        &__name{
            font-size:28px;
            font-weight:bold;
            color:rgba(227,30,103,1);
            margin-right: 15px;
        }
        &__cop{
            font-size:28px;
            font-weight:bold;
            color:#000;
        }
    }
    &__require{
        font-size: 22px;
        font-weight:400;
        color:rgba(80,80,80,1);
        margin-bottom: 38px;
    }
    &-skill{
        list-style: decimal;
        margin: 0;
        padding: 0 0 0 2ch;
        font-size: 20px;
        color: #4D4D4D;
        line-height: 36px;
    }
}

.ui-demand{
    .l{
        margin-right: 20px;
    }
    .ui-title{
        margin-bottom: 55px;
    }
}
.use-project-tech__desc{
    margin-top: 55px;
    margin-right: 155px;
    font-size: 20px;
    line-height:36px;
}

.to-guide-better-of-u{
    margin-bottom: 150px;
    &__title{
        font-size:30px;
        font-weight:bold;
        color:rgba(230,30,103,1);
        margin-bottom: 55px;
    }
    &-wrap{
        display: flex;
        justify-content: space-between;
        &__item{
            width:262px;
            height:404px;
            background:linear-gradient(0deg,rgba(55,191,254,1) 0%,rgba(27,146,255,1) 100%);
            border-radius:27px;
            display: flex;
            flex-direction: column;
            align-items: center;
            img{
                margin: 42px 0 38px;
            }
            &_t{
                max-width: 140px;
                text-align: center;
                font-size: 20px;
                color: #fff;
                margin-bottom: 23px;
            }
            &_desc{
                font-size: 16px;
                line-height: 28px;
                color: rgba(255, 255, 255, 1);
                padding: 0 35px;
            }
        }
    }
}

.project-show{
    .ui-title{
        margin-bottom: 80px;
    }
    &-item{
        text-align: center;
        margin-bottom: 100px;
        &__name{
            font-size: 40px;
            color: rgba(51, 51, 51, 1);
            margin: 0 0 60px 0;
            text-align: left;
        }
    }
}

.syllabus{
    text-align: center;
    .ui-title{
        text-align: left;
        margin-bottom: 50px;
    }
}
</style>
